<template>
  <div class="xgrph-container">
    <!-- 头部标题 -->
    <div class="header">
      <div class="titleMain">锌锅热平衡</div>
    </div>

    <!-- Main Content Area (Three Columns) -->
    <div class="main-content">
      <!-- Left Panel (Charts) -->
      <div class="left-panel">
        <!-- Top Line Chart -->
        <div class="chart-card line-chart no-header">
          <div class="chart-content" ref="lineChartTopRef"></div>
        </div>
        <!-- Bottom Line Chart -->
        <div class="chart-card line-chart no-header">
          <div class="chart-content" ref="lineChartBottomRef"></div>
        </div>
      </div>

      <!-- Middle Panel (Diagram & Status Boxes) -->
      <div class="middle-panel">
        <!-- Alarm Banner (Stays outside the card for now) -->
        <div class="alarm-banner">
          <i class="fa fa-exclamation-triangle"></i> 报警信息 {{ warningMessage }}
        </div>
        <!-- Use NewCoilCard for the main middle content -->
        <NewCoilCard title="焊缝跟踪" class="middle-content-card">
          <!-- Middle Diagram Area -->
          <div class="process-diagram-area">
            <div class="system-status-bar">
              <div class="status-text">
                <i class="status-icon">//</i> 系统运行状态
                <span class="status-line">--------------</span>
                <div class="status-indicator">
                  <img src="../../assets/svgs/smile.svg" alt="运行" class="status-smile-icon" />
                  <span class="status-good">良好</span>
                </div>
              </div>
              <div class="system-status-bar-right">入锌锅温度预测值：459℃ | 实际值：456°C</div>
            </div>
            <!-- REPLACED: Original Status Boxes Area with Top Data Boxes -->
            <div class="top-data-boxes-area">
              <div class="data-box top-box"> <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.width }}</div>
                <div class="data-box-label">宽度(mm)</div>
              </div>
              <div class="data-box top-box"> <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.speed }}</div>
                <div class="data-box-label">速度(m/min)</div>
              </div>
              <div class="data-box top-box"> <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.ambientTemp }}</div>
                <div class="data-box-label">环境温度(°C)</div>
              </div>
            </div>

            <!-- ADDED: Diagram specific text overlays -->
            <div class="diagram-text rapid-cool-text">快冷温度 950℃</div>
            <div class="diagram-text strip-entry-text">带钢入锌锅温度 AI设定值: 459℃ | 实际值: 456℃</div>

            <!-- New container for SVG and Table -->
            <div class="middle-main-content">
              <!-- Placeholder for SVG -->
              <div class="svg-placeholder"></div>
            </div>

            <!-- REPLACED: Content of Data Boxes Overlay -->
            <div class="data-boxes-overlay new-bottom-boxes"> <!-- Add new class to scope styles -->
              <!-- Row 1: zincMelt, zincIngotTemp, zincLiquidTemp -->
              <div class="data-box-row">
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.zincMelt }}</div>
                  <div class="data-box-label">锌锭融化量</div>
                </div>
                <!-- REMOVED Spacer -->
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.ambientTemp }}</div>
                  <!-- Placeholder for zinc ingot temp -->
                  <div class="data-box-label">锌锭温度(°C)</div>
                </div>
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.zincLiquidTemp }}</div>
                  <div class="data-box-label">锌液温度(°C)</div>
                </div>
              </div>
              <!-- Row 2: potBottomTemp, potWallTemp, potPower -->
              <div class="data-box-row">
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.potBottomTemp }}</div>
                  <div class="data-box-label">锌锅底部温度(°C)</div>
                </div>
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.potWallTemp }}</div>
                  <div class="data-box-label">锌锅外壁温度(°C)</div>
                </div>
                <div class="data-box bottom-box"> <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.potPower }}</div>
                  <div class="data-box-label">锌锅功率</div>
                </div>
              </div>
            </div>
          </div>
        </NewCoilCard>
      </div>

      <!-- Right Panel (Tables) -->
      <div class="right-panel">
        <!-- Use NewCoilCard for Top Table -->
        <NewCoilCard title="当前钢卷信息" class="right-table-card">
          <el-table :data="topTableData" style="width: 100%; height: 100%;" border size="small"
            :header-cell-style="rightTableHeaderStyle" :cell-style="rightTableCellStyle">
            <el-table-column prop="label" label="参数" />
            <el-table-column prop="value" label="值" />
          </el-table>
        </NewCoilCard>
        <!-- Use NewCoilCard for Bottom Table -->
        <NewCoilCard title="下一卷钢卷信息" class="right-table-card">
          <el-table :data="bottomTableData" style="width: 100%; height: 100%;" border size="small"
            :header-cell-style="rightTableHeaderStyle" :cell-style="rightTableCellStyle">
            <el-table-column prop="label" label="参数" />
            <el-table-column prop="value" label="值" />
          </el-table>
        </NewCoilCard>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
import NewCoilCard from '../../components/NewCoilCard/NewCoilCard.vue'; // Corrected import path

// Register ECharts components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  MarkLineComponent
]);

// --- Refs for Charts ---
const lineChartTopRef = ref<HTMLElement | null>(null);
const lineChartBottomRef = ref<HTMLElement | null>(null);

// --- ECharts Instances ---
let lineChartTopInstance: echarts.ECharts | null = null;
let lineChartBottomInstance: echarts.ECharts | null = null;

// --- State ---

// --- 表格样式 ---
const headerCellStyle = {
  background: '#234584',
  color: '#fff',
  padding: '8px 0',
  textAlign: 'center',
  fontWeight: 'normal',
  borderBottom: '1px solid #0a1a3a'
};

const cellStyle = {
  padding: '8px 0',
  textAlign: 'center',
  color: '#c0c4cc',
  borderBottom: '1px solid #0a1a3a',
  borderRight: '1px solid #0a1a3a'
};

// --- 生产统计信息 ---
const productionStats = reactive({
  dailyOutput: 1028.3,
  actualHourlyOutput: 152.5,
  hourlyOutput: 135.0,
  processSpeed: 210.7
});

// --- 张力信息 ---
const tensionInfo = reactive({
  set: 8.0,
  actual: 2.5
});

// --- 警告信息 ---
const warningMessage = ref('每多消耗1km高炉煤气,影响成本125.59元');

// --- Status Box Data (Middle Panel) ---
const statusBoxData = reactive({
  rapidCoolTemp: 950,   // 快冷温度
  stripSpeed: 116,      // 带钢速度
  zincPotTemp: 456,     // 锌液温度
  stripTemp: 459        // 带钢温度
});

// --- Data Box Values (Middle Panel Bottom - From Image) ---
const dataBoxValues = reactive({
  width: 1294,          // 宽度(mm)
  speed: '124.02',      // 速度(m/min)
  zincMelt: '893.39',     // 锌锭融化量
  ambientTemp: 10,      // 环境温度(°C)
  zincLiquidTemp: '456.08', // 锌液温度(°C)
  potBottomTemp: 47,     // 锌锅底部温度(°C)
  potWallTemp: 47,       // 锌锅外壁温度(°C)
  potPower: 420          // 锌锅功率
});

// --- Middle Table Data ---
const middleTableData = ref<InfoTableRow[]>([
  { label: '参数A', value: '示例值A' },
  { label: '参数B', value: 123.45 },
  { label: '参数C', value: '示例值C' },
  { label: '参数D', value: 678 },
  { label: '参数E', value: '示例值E' },
  { label: '参数F', value: 9.01 },
]);

// --- Define interface and data for right-side tables ---
interface InfoTableRow {
  label: string;
  value: string | number;
}

const topTableData = ref<InfoTableRow[]>([
  { label: '钢卷号', value: '4L0079340D' },
  { label: '订单牌号', value: 'DC51D-1' },
  { label: '镀层规格(g/m²)', value: 80 },
  { label: '带钢宽度(mm)', value: 1000 },
  { label: '带钢厚度(mm)', value: 1.00 },
  { label: '带钢速度(m/min)', value: 116 },
  { label: '液锌温度(°C)', value: 456 },
  { label: '带钢张力(kN)', value: 32.77 },
  { label: '正面气刀角度(°)', value: -0.50 },
  { label: '背面气刀角度(°)', value: -0.63 },
  { label: '头部位移(m)', value: 1047.05 },
]);

const bottomTableData = ref<InfoTableRow[]>([
  { label: '钢卷号', value: '4L0079340D' },
  { label: '订单牌号', value: 'DC51D-1' },
  { label: '镀层规格(g/m²)', value: 80 },
  { label: '总厚度目标值(g/m²)', value: 0.00 },
  { label: '带钢宽度(mm)', value: 0 }, // Placeholder
  { label: '带钢厚度(mm)', value: 0.00 }, // Placeholder
  { label: '焊缝至气刀距离(m)', value: 13.23 },
  { label: '焊缝至测厚仪距离(m)', value: 32.77 },
  { label: '气刀压力设定值(mbar)', value: -0.50 },
  { label: '气刀距离设定值(mm)', value: -0.63 },
  { label: '气刀高度设定值(mm)', value: 1047.05 },
]);

// --- Define styles for right-side tables (can be customized further in CSS) ---
const rightTableHeaderStyle = {
  background: '#183272', // Darker blue for header
  color: '#b8e8ff',
  padding: '6px 0',
  textAlign: 'center',
  fontWeight: 'normal',
  borderBottom: '1px solid #06279d' // Use the border color from image
};

const rightTableCellStyle = {
  padding: '6px 0',
  textAlign: 'center',
  color: '#c0c4cc',
  borderBottom: '1px solid #06279d',
  borderRight: '1px solid #06279d',
  fontSize: '12px'
  // Background will be handled by alternating row styles in CSS
};

// --- 图表配置 ---
const lineChartOption_Top = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  // ADDED: Legend configuration
  legend: {
    data: ['AI', 'MM', 'PLC'],
    right: '4%',
    top: '0%', // Position at the top
    textStyle: {
      color: '#c0c4cc',
      fontSize: 10
    },
    itemWidth: 15,
    itemHeight: 10
  },
  // MODIFIED: Adjusted grid to make space for legend
  grid: { left: '3%', right: '4%', bottom: '5%', top: '15%', containLabel: true }, // Increased top margin
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['14:46:20', '14:46:40', '14:47:00', '14:47:20', '14:47:40', '14:48:00', '14:48:20'],
    axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
    axisLabel: { color: '#c0c4cc', fontSize: 10 }
  },
  yAxis: {
    type: 'value',
    min: 38, max: 47,
    axisLabel: { color: '#c0c4cc', fontSize: 10 },
    splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
    axisLine: { show: false }
  },
  series: [
    // MODIFIED: Updated series names
    { name: 'AI', type: 'line', smooth: true, symbol: 'none', data: [41.5, 41, 44, 42, 43, 46, 45.5], lineStyle: { color: '#00baff' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 186, 255, 0.6)' }, { offset: 1, color: 'rgba(0, 186, 255, 0.1)' }]) } },
    { name: 'MM', type: 'line', smooth: true, symbol: 'none', data: [43, 42.5, 42, 43.5, 44, 43, 44.5], lineStyle: { color: '#f4c74f' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(244, 199, 79, 0.5)' }, { offset: 1, color: 'rgba(244, 199, 79, 0.1)' }]) } },
    { name: 'PLC', type: 'line', smooth: true, symbol: 'none', data: [39, 40, 41.5, 41, 42.5, 44.5, 46], lineStyle: { color: '#2af598' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(42, 245, 152, 0.5)' }, { offset: 1, color: 'rgba(42, 245, 152, 0.1)' }]) } }
  ]
}));

const lineChartOption_Bottom = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  // ADDED: Legend configuration
  legend: {
    data: ['AI', 'MM', 'PLC'],
    right: '4%',
    top: '0%', // Position at the top
    textStyle: {
      color: '#c0c4cc',
      fontSize: 10
    },
    itemWidth: 15,
    itemHeight: 10
  },
  // MODIFIED: Adjusted grid to make space for legend
  grid: { left: '3%', right: '4%', bottom: '5%', top: '15%', containLabel: true }, // Increased top margin
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['14:46:20', '14:46:40', '14:47:00', '14:47:20', '14:47:40', '14:48:00', '14:48:20'],
    axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
    axisLabel: { color: '#c0c4cc', fontSize: 10 }
  },
  yAxis: {
    type: 'value',
    min: 38, max: 47,
    axisLabel: { color: '#c0c4cc', fontSize: 10 },
    splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
    axisLine: { show: false }
  },
  series: [
    // MODIFIED: Updated series names
    { name: 'AI', type: 'line', smooth: true, symbol: 'none', data: [44, 43.5, 45, 44, 45.5, 46.5, 46], lineStyle: { color: '#00baff' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 186, 255, 0.6)' }, { offset: 1, color: 'rgba(0, 186, 255, 0.1)' }]) } },
    { name: 'MM', type: 'line', smooth: true, symbol: 'none', data: [42, 43, 41.5, 42.5, 44, 42, 43.5], lineStyle: { color: '#f4c74f' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(244, 199, 79, 0.5)' }, { offset: 1, color: 'rgba(244, 199, 79, 0.1)' }]) } },
    { name: 'PLC', type: 'line', smooth: true, symbol: 'none', data: [40, 41, 42, 40.5, 41.5, 43.5, 45], lineStyle: { color: '#2af598' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(42, 245, 152, 0.5)' }, { offset: 1, color: 'rgba(42, 245, 152, 0.1)' }]) } }
  ]
}));

// --- SVG交互 ---
const onSvgLoaded = () => {
  console.log("SVG图片加载完成");

  // 简化SVG加载事件，暂时移除SVG DOM操作
  try {
    // SVG加载成功
    console.log("SVG加载成功");
  } catch (error) {
    console.error("SVG操作失败:", error);
  }
};

// --- 初始化图表 ---
const initCharts = () => {
  try {
    if (lineChartTopRef.value && !lineChartTopInstance) {
      lineChartTopInstance = echarts.init(lineChartTopRef.value);
      lineChartTopInstance.setOption(lineChartOption_Top.value);
    }
    if (lineChartBottomRef.value && !lineChartBottomInstance) {
      lineChartBottomInstance = echarts.init(lineChartBottomRef.value);
      lineChartBottomInstance.setOption(lineChartOption_Bottom.value);
    }
  } catch (error) {
    console.error("图表初始化失败:", error);
  }
};

// 动态更新数据
const updateData = () => {
  statusBoxData.rapidCoolTemp = 950 + Math.floor(Math.random() * 5 - 2);
  statusBoxData.stripSpeed = 116 + Math.floor(Math.random() * 3 - 1);
  // ... update other values ...
  warningMessage.value = `每多消耗1km高炉煤气,影响成本${(125.59 + Math.random()).toFixed(2)}元`;
};

const resizeCharts = () => {
  lineChartTopInstance?.resize();
  lineChartBottomInstance?.resize();
};

// --- 生命周期钩子 ---
let updateTimer: number | null = null;

onMounted(() => {
  // 延迟初始化图表，确保DOM已渲染
  nextTick(() => {
    setTimeout(initCharts, 100);
  });

  window.addEventListener('resize', resizeCharts);
  // updateTimer = window.setInterval(updateData, 3000); // Temporarily disabled
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts);
  lineChartTopInstance?.dispose();
  lineChartBottomInstance?.dispose();
  // if (updateTimer !== null) { // Temporarily disabled
  //   clearInterval(updateTimer);
  // }
});

</script>

<style scoped>
.xgrph-container {
  position: relative;
  background: url('../../assets/images/body-bg.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  flex: 0 0 60px;
  background-image: url('../../assets/images/head-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 10;
  padding-top: 3px;
  margin-bottom: -15px;
}

.titleMain {
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 10px #42b4ff, 0 0 20px #0a2466;
  letter-spacing: 2px;
}

/* Main Layout Styles - Modified for Three Columns */
.main-content {
  display: flex;
  flex-grow: 1;
  padding: 0 5px 5px 5px;
  overflow: hidden;
}

.left-panel {
  display: flex;
  flex-direction: column;
  width: 28%;
  /* Narrower */
  margin-right: 5px;
}

/* Middle Panel Styles */
.middle-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Takes remaining space */
  margin-right: 5px;
  overflow: hidden;
}

.right-panel {
  display: flex;
  flex-direction: column;
  width: 28%;
  /* Narrower */
  overflow: hidden;
}

/* Status Boxes Area Styles (Middle Panel) */
.status-boxes-area {
  display: flex;
  justify-content: space-around;
  /* Or space-between */
  align-items: center;
  margin-bottom: 5px;
  /* Space below boxes */
  padding: 10px 0;
  /* Add some vertical padding */
  flex-wrap: wrap;
  /* Allow wrapping if needed */
  gap: 5px;
  width: 100%;
  /* Gap between boxes */
  margin-bottom: 15px;
  /* Add space below status boxes */
}

/* Individual Status Box Style (Middle Panel) */
.status-box {
  background-color: rgba(16, 39, 82, 0.8);
  background-image: url('../../assets/img/icon-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Reuse color */
  /* border: 1px solid #2a5caa; */
  padding: 10px;
  text-align: center;
  color: #fff;
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  /* Hexagonal */
  min-width: 140px;
  /* Adjust width as needed */
  height: 80px;
  /* Adjust height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Optional: Decorative lines like the original data-box */
.status-box::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #42b4ff, transparent);
  opacity: 0.6;
}

.status-box-label {
  font-size: 12px;
  color: #a2cfff;
  margin-bottom: 4px;
}

.status-box-value {
  font-size: 18px;
  /* Slightly smaller */
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(66, 180, 255, 0.7);
  margin-bottom: 26px;
}

.status-box-value span {
  font-size: 11px;
  /* Unit size */
  margin-left: 3px;
  opacity: 0.8;
}

/* Middle Panel Diagram Area */
.middle-panel .process-diagram-area {
  flex-grow: 1;
  position: relative;
  background: linear-gradient(to bottom, #102450, #0a1a3a);
  border: 1px solid #3a66a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Restore SVG Placeholder styles */
.svg-placeholder {
  background-image: url('../../assets/svgs/image.svg');
  background-size: contain;
  /* Use contain to fit the image */
  background-position: center center;
  background-repeat: no-repeat;
  flex: 1;
  /* Take up half the space */
  min-height: 200px;
  /* Ensure it has some height */
  /* Remove width/height: 90% from previous style if present */
}

/* New container for SVG and Table */
.middle-main-content {
  display: flex;
  flex-grow: 1;
  /* Take remaining vertical space */
  width: 100%;
  align-items: stretch;
  /* Stretch items vertically */
  padding: 5px 10px;
  /* Add some padding */
  gap: 10px;
  /* Space between SVG and table */
  margin-bottom: 10px;
  /* Add space below SVG/Table area */
  margin-top: 10px;
  /* Add space above SVG/Table area */
}

/* Style for the middle table container */
.middle-table-container {
  flex: 1;
  /* Take up half the space */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Prevent content overflow */
  border: 1px solid #06279d;
  /* Optional: Add border like tables */
  margin: 0;
  /* Reset margins */
  min-height: 200px;
  /* Match SVG min-height */
}

/* Middle Panel Bottom Data Boxes (inside card) */
.data-boxes-overlay {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-bottom: 90px;
  /* Keep original padding if needed */
  position: relative;
  /* Keep original positioning */
}

/* Remove data-box-row style */
.data-box-row {
  display: none;
}

.data-box {
  width: 120px;
  height: 70px;
  background: linear-gradient(145deg, rgba(15, 45, 90, 0.9), rgba(5, 20, 50, 0.95));
  border: 1px solid rgba(0, 180, 220, 0.6);
  border-radius: 4px;
  position: relative;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 10px rgba(0, 210, 255, 0.25), 0 0 6px rgba(0, 180, 220, 0.15);
  transition: all 0.3s ease;
  color: #e0f8ff;
  margin: 1px;
}

/* Remove hexagonal clip-path */
/* clip-path: polygon(...); */

/* Remove horizontal lines */
.data-box::before,
.data-box::after {
  content: none;
}

.data-box-value {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(0, 210, 255, 0.7);
}

.data-box-label {
  font-size: 10px;
  color: #a8e0ff;
  margin-top: 5px;
  opacity: 0.85;
  margin-bottom: 24px;
}

/* Left Panel Chart Styles - Keep existing */
.left-panel .chart-card {
  flex: 1;
  margin-bottom: 5px;
}

.left-panel .chart-card:last-child {
  margin-bottom: 0;
}

.chart-card.no-header .chart-header {
  display: none;
}

.chart-card.no-header .chart-content {
  height: 100%;
}

.chart-card {
  background-color: rgba(28, 58, 99, 0.7);
  border: 1px solid rgba(90, 130, 190, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 15px rgba(11, 93, 209, 0.2);
}

.chart-content {
  flex-grow: 1;
  width: 100%;
}

/* Right Panel Styles - Keep existing, width is set above */
.alarm-banner {
  background-image: url('../../assets/img/red-warning.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  padding: 5px 15px;
  margin-bottom: 5px;
  font-size: 13px;
  display: flex;
  align-items: center;
  border: 1px solid #c83c3c;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(200, 60, 60, 0.5);
}

.middle-panel .alarm-banner i {
  margin-right: 8px;
}

.middle-panel .status-boxes-area {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 5px;
  padding: 10px 0;
  flex-wrap: wrap;
  gap: 5px;
}

.middle-panel .status-box {
  background-color: rgba(16, 39, 82, 0.8);
  background-image: url('../../assets/img/icon-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px;
  text-align: center;
  color: #fff;
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  min-width: 140px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.middle-panel .status-box::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #42b4ff, transparent);
  opacity: 0.6;
}

.middle-panel .status-box-label {
  font-size: 12px;
  color: #a2cfff;
  margin-bottom: 4px;
}

.middle-panel .status-box-value {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(66, 180, 255, 0.7);
  margin-bottom: 26px;
}

.middle-panel .status-box-value span {
  font-size: 11px;
  margin-left: 3px;
  opacity: 0.8;
}

/* Right Panel Table Styles (deep selectors) - Keep existing */
:deep(.el-table) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table tr:nth-child(odd)) {
  background-color: #0f2142 !important;
}

:deep(.el-table tr:nth-child(even)) {
  background-color: #142a52 !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: inherit !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
  background-color: transparent !important;
  border-color: #06279d !important;
  color: #c0c4cc;
}

:deep(.el-table th.el-table__cell) {
  color: #b8e8ff;
  background-color: #183272 !important;
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border::after),
:deep(.el-table--border::before) {
  background-color: #06279d !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border td.el-table__cell),
:deep(.el-table--border th.el-table__cell) {
  border-right: 1px solid #06279d !important;
}

:deep(.el-table__border-left-patch) {
  background-color: #06279d !important;
}

:deep(.el-table--border .el-table__inner-wrapper::before) {
  background-color: #06279d !important;
}

/* Make NewCoilCard components fill the right panel height */
.right-panel>.right-table-card {
  flex: 1;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}

.right-panel>.right-table-card:last-child {
  margin-bottom: 0;
}

/* Ensure the slot content area within the card takes up space */
.right-table-card>.containerContent {
  flex-grow: 1;
  overflow: hidden;
}

.middle-content-card>.containerContent {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
}

/* 系统运行状态栏样式 */
.system-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  padding: 5px 15px;
  margin-bottom: 10px;
}

.system-status-bar-right {
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
}

.status-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  position: relative;
  width: 100%;
}

.status-icon {
  color: #0088ff;
  font-weight: 900;
  margin-right: 8px;
  font-style: normal;
}

.status-line {
  margin-left: 10px;
  opacity: 0.5;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.status-smile-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.status-good {
  font-size: 12px;
  color: #2af598;
}

/* Layout for the new top row of boxes */
.top-data-boxes-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc(100% - 40px);
  margin: 10px auto 5px auto;
  padding: 5px 0;
  gap: 10px;
  flex-shrink: 0;
}

/* Style for top boxes (uses .data-box) */
.data-box.top-box {
  /* Override base data-box styles */
  background: none;
  /* Remove gradient */
  border: none;
  /* Remove border */
  background-image: url('../../assets/img/icon-bg.png');
  /* Set new background image */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 130px;
  /* Keep adjusted width */
  height: 70px;
  /* Adjusted height slightly to better fit image ratio */
  flex-shrink: 0;
  padding: 10px 5px;
  /* Adjust padding */
  box-shadow: none;
  /* Remove original shadow */
}

/* Optional: Adjust text alignment if needed for the new background */
.data-box.top-box .data-box-value {
  /* text-shadow: none; */
  /* Example: remove text shadow if it clashes */
  font-size: 20px;
  /* Example: adjust font size */
}

.data-box.top-box .data-box-label {
  margin-top: 2px;
  /* Adjust spacing */
}

/* Styles for the absolutely positioned text labels */
.diagram-text {
  position: absolute;
  color: #fff;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.rapid-cool-text {
  top: 20%;
  left: 35px;
  color: #ffd700;
  font-weight: bold;
}

.strip-entry-text {
  top: 40%;
  right: 14%;
  font-size: 12px;
}

/* Styles for the new structure within the bottom .data-boxes-overlay */
.data-boxes-overlay.new-bottom-boxes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  /* Center rows vertically */
  align-items: center;
  gap: 15px;
  /* Increased gap between rows */
  padding: 20px 25px;
  /* Adjust padding for background */
  /* ADDED: Background image */
  border-radius: 5px;
  /* Optional: add radius if background has rounded corners */
  /* Ensure width and flex-shrink are appropriate */
  width: calc(100% - 20px);
  /* Adjust width to allow for padding */
  margin: 0 auto;
  /* Center the container */
  flex-shrink: 0;
}

/* Style for the new rows */
.data-box-row {
  display: flex;
  gap: 15px;
  /* Adjust space between boxes in a row */
  width: 100%;
  justify-content: space-around;
  /* Distribute 3 boxes evenly */
}

/* Style for bottom boxes (inherits .data-box) */
.data-box.bottom-box {
  flex-basis: 30%;
  /* Example: Adjust basis for 3 boxes per row */
  /* width: auto; */
  /* Let flex-basis control width */
  background-image: url('../../assets/img/en-centerbg.png');
  background-size: contain;
  /* Or cover, or specific size */
  background-position: center bottom;
  /* Position background */
  background-repeat: no-repeat;
  flex-shrink: 1;
  margin: 0;
  /* Reset margin from .data-box */
  /* Ensure height is appropriate */
  height: 70px;
}
</style>